<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar>
          <template #left>
            <el-form :inline="true">
              <el-form-item prop="name">
                <el-input 
                  placeholder="搜索界面名称"
                  v-model="query.name"
                  @input="queryChange"
                />
              </el-form-item>
              <el-form-item prop="guiTag">  
                <WebviewTag
                  v-model="query.guiTag"
                  :clearable="true"
                  @query-change="queryChange"
                />
              </el-form-item>
              <el-form-item prop="status">
                <el-select v-model="query.status" :clearable="true" @change="queryChange" placeholder="请选择审批状态">
                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"  />
                </el-select>
              </el-form-item>
              <el-form-item prop="daterange">
                <el-date-picker
                  style="width: 250px"
                  v-model="query.daterange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="queryChange"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import ApplyPlatformCascader from '@/components/ApplyPlatformCascader';
import WebviewTag from '@/components/WebviewTag';
import { getTagListById } from '@/utils'
import { useListManage } from "@/hooks";
import { useRouter } from 'vue-router';
import { parseTime } from '@/utils'
import {
  getTableList,
  getDetail,
} from "@/api/webview-register";
import {
  getTagsPageList,
} from "@/api/service.js";
export default defineComponent({
  name: "WebviewRegisterApply",
  components: {
    WebviewTag,
    ApplyPlatformCascader,
    Header,
    FilterBar,
    DynamicTable
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const query = reactive({
      daterange: null,
      status: null,
      name: null,
      guiTag: null
    });
    
    let {
      page,
      list,
      total,
      height,
      refresh,
      listLoading,
      getList,
      queryChange,
      showDetail,
      handleDetail,
      reset
    } = useListManage(props, emit, {
     getItems: getTableList,
      query: query,
      getDetail: getDetail,
      deleteItem: null
    });
    const tagList = ref([]);
    tagList.value = getTagsPageList()
    const statusList = ref([
      {
        name: '待审批',
        value: 0
      },
       {
        name: '审批通过',
        value: 1
      },
       {
        name: '审批拒绝',
        value: 2
      },
      //  {
      //   name: '撤回',
      //   value: 999
      // },
    ])
    const tableColumns = ref([
      {
        label: "界面名称",
        key: "name",
        minWidth: "200px",
      },
      {
        label: "审批状态",
        width: "100px",
        render: (h, {row, index}) => (
          <span>
            {
              <el-tag
                type={row.status === 1? 'success':row.status === 2? 'warning':''}
                class="status-tag"
              >
                {row.status === 1? '已通过':row.status === 2? '已拒绝':'待审批'}
              </el-tag>
            }
          </span>
        ),
      },
      {
        label: "申请描述",
        key: "desc",
        showTooltip: true,
        minWidth: "300px",
      },
      {
        label: "应用名称",
        key: "appName",
        minWidth: "200px",
      },
      {
        label: "注册时间",
        key: "createDate",
        minWidth: "200px",
        render: (h, {row, index}) => (
          <span>
            {parseTime(row.createDate)}
          </span>
        ),
      },
      {
        label: "操作",
        fixed: "right",
        width: "100px",
        render: (h, params) => (
          <span>
            {
             
              <el-button
                
                type="text"
                size="small"
                onClick={() => router.push(`/webview-register/approve/${params.row.id}`)}
              >
                 {params.row.status === 0?'审批':'查看'}
              </el-button>
            }
          </span>
        ),
      },
    ]);
    onMounted(() => {
      getList();
    });

    return {
      // 列表数据
      page,
      list,
      total,
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      refresh,
      router,
      parseTime,
      statusList,
      reset
    };
  },
});
</script>
<style scoped lang="scss">
.el-form--inline .el-form-item{
  margin-right: 0 !important;
  & + .el-form-item {
    margin-left: 10px;
  }
}
.table-container {
  height: calc(100% - 130px);
}
</style>